// Ultralytics 🚀 AGPL-3.0 License - https://ultralytics.com/license

// Apply theme colors based on dark/light mode
const applyTheme = (isDark) => {
  document.body.setAttribute("data-md-color-scheme", isDark ? "slate" : "default");
  document.body.setAttribute("data-md-color-primary", isDark ? "black" : "indigo");
};

// Sync widget theme with Material theme
const syncWidgetTheme = () => {
  const isDark = document.body.getAttribute("data-md-color-scheme") === "slate";
  document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");
};

// Check and apply appropriate theme based on system/user preference
const checkTheme = () => {
  const palette = JSON.parse(localStorage.getItem(".__palette") || "{}");
  if (palette.index === 0) {
    applyTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
    syncWidgetTheme();
  }
};

// Initialize theme handling on page load
document.addEventListener("DOMContentLoaded", () => {
  checkTheme();
  syncWidgetTheme();

  // Watch for system theme changes
  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", checkTheme);

  // Watch for theme toggle changes
  document.getElementById("__palette_1")?.addEventListener("change", (e) => {
    if (e.target.checked) setTimeout(checkTheme);
  });

  // Watch for Material theme changes and sync to widget
  new MutationObserver(syncWidgetTheme).observe(document.body, {
    attributes: true,
    attributeFilter: ["data-md-color-scheme"],
  });
});

// Ultralytics Chat Widget ---------------------------------------------------------------------------------------------
let ultralyticsChat = null;

document.addEventListener("DOMContentLoaded", () => {
  ultralyticsChat = new UltralyticsChat({
    welcome: {
      title: "Hello 👋",
      message: "Ask about YOLO, tutorials, training, export, deployment, or troubleshooting.",
      chatExamples: ["What's new in SAM 3?", "How can I get started with YOLO?", "How does Enterprise Licensing work?"],
      searchExamples: [
        "YOLO11 quickstart",
        "custom dataset training",
        "model export formats",
        "object detection tutorial",
        "hyperparameter tuning",
      ],
    },
  });

  const headerElement = document.querySelector(".md-header__inner");
  const searchContainer = headerElement?.querySelector(".md-header__source");

  if (headerElement && searchContainer) {
    const searchBar = document.createElement("div");
    searchBar.className = "ult-header-search";
    const hotkey = /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? "⌘K" : "Ctrl+K";
    searchBar.innerHTML = `
      <button class="ult-search-button" title="Search documentation (${hotkey})" aria-label="Search documentation">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <circle cx="11" cy="11" r="8"></circle>
          <path d="m21 21-4.35-4.35"></path>
        </svg>
        <span>Search</span>
        <span class="ult-search-hotkey" aria-hidden="true">${hotkey}</span>
      </button>
    `;
    headerElement.insertBefore(searchBar, searchContainer);

    const defaultSearchToggle = headerElement.querySelector('label[for="__search"]');
    const defaultSearchInput = document.getElementById("__search");
    const defaultSearchDialog = document.querySelector(".md-search");
    if (defaultSearchToggle) {
      defaultSearchToggle.setAttribute("aria-hidden", "true");
      defaultSearchToggle.style.display = "none";
    }
    if (defaultSearchInput) {
      defaultSearchInput.setAttribute("tabindex", "-1");
      defaultSearchInput.setAttribute("aria-hidden", "true");
    }
    if (defaultSearchDialog) defaultSearchDialog.style.display = "none";

    searchBar.querySelector(".ult-search-button").addEventListener("click", () => {
      ultralyticsChat?.toggle(true, "search");
    });
  }
});

// Fix language switcher links
(() => {
  function fixLanguageLinks() {
    const path = location.pathname;
    const links = document.querySelectorAll(".md-select__link");
    if (!links.length) {
      return;
    }

    const langs = [];
    let defaultLink = null;

    // Extract language codes
    links.forEach((link) => {
      const href = link.getAttribute("href");
      if (!href) {
        return;
      }

      const url = new URL(href, location.origin);
      const match = url.pathname.match(/^\/([a-z]{2})\/?$/);

      if (match) {
        langs.push({ code: match[1], link });
      } else if (url.pathname === "/" || url.pathname === "") {
        defaultLink = link;
      }
    });

    // Find current language and base path
    let basePath = path;
    for (const lang of langs) {
      if (path.startsWith(`/${lang.code}/`)) {
        basePath = path.substring(lang.code.length + 1);
        break;
      }
    }

    // Update links
    langs.forEach((lang) => {
      lang.link.href = `${location.origin}/${lang.code}${basePath}`;
    });
    if (defaultLink) {
      defaultLink.href = location.origin + basePath;
    }
  }

  // Run immediately
  fixLanguageLinks();

  // Handle SPA navigation
  if (typeof document$ !== "undefined") {
    document$.subscribe(() => setTimeout(fixLanguageLinks, 50));
  } else {
    let lastPath = location.pathname;
    setInterval(() => {
      if (location.pathname !== lastPath) {
        lastPath = location.pathname;
        setTimeout(fixLanguageLinks, 50);
      }
    }, 200);
  }
})();
